vue-router基本用法

组件切换

就个人目前所知，Vue中切换组件有两种方式：

动态组件(:is属性绑定)

<component v-bind:is="currentTabComponent"></component>

查看官网介绍

查看官网示例

注意：

• 使用component:is的组件必须是局部注册 | 全局注册 | 组件初始对象。

惊喜：

• 该方法与keep-alive更配哟，切换到另一组件时，可以保存当前组件状态。

keep-alive官方说明

keep-alive要注意，切换回来的时候，不会再触发created、mounted生命周期

路由跳转(Routes)

详见下述...

路由跳转(Routes)

1. 路由配置（一切的前提）

如果通过vue-cli脚手架初始化的项目，会在src/router/目录下有一个已创建好的路由配置：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

这里有两个概念，也是在程序中路由使用经常碰到的实例对象this.$router、this.$route：

this.$router：

可以简单的理解为new Router创建的路由实例，包含了所有路由(route)的配置信息。

this.$route：

可以简单的理解为routes中的当前所在路由的所有配置信息，如path、params、query、name...

---

指定路由切换的方式有两种，二选一即可：

2. 声明式路由切换(HTML)

• 直接通过to属性绑定字符串路径:

<router-link to="/path"></router-link>

或

• 通过:to动态绑定route对象:

<router-link :to="{
  path:'/path'
}"></router-link>

注意：

• 若route对象中配置了params属性，则目标跳转路径不能通过path指定，而要通过路由配置中的name指定，示例:to="{name:'HelloWorld',params:{id:'1234'}}"。

不爽之处：

• 通过router-link方法切换路由，如果想在该链接上绑定其它事件，不能直接通过@click，而需要@click.native。

---

2. 命令式路由切换(JS)

在程序中进行路由跳转的方式和HTML中差不多，只需要在需要跳转的位置，使用this.$router.push('/path')或

this.$router.push({
  path:'/path'
})

即可。

禁止路由跳转

组件比较挑食，在某些情况下，我是禁止进入你进入我的家门的，怎么禁止呢？

beforeRouteEnter(to,from,next){
  if(...){
    ...
    next(false); //不许进；
  }
}

路由生命周期注意项

component:is

通过该方法进行组件切换的，不是Url的变动，不会触发路由生命周期；

动态路由

'/user/:id'动态路径参数的变动，不会触发beforeRouteEnter生命周期，可以通过beforeRouteUpdate来监听变化。

其它

路由模式

Hash模式

Hash模式是指路由配置中的path不是进行页面的跳转，而是通过#连接的，框架内部处理的组件切换。

URL的井号(作者： 阮一峰)

History模式

History模式，没有#，URL显示与正常的URL一样，需要后台配合一些配置项（个人没怎么用过(^_^)）。